<template>
  <div class="container-fluid">
    <div class="footer">
      <div class="footer-list">
        <ul class="footer-list-item">
          <li>
            <div class="footer-list-logo icons-zheng"></div>
            <div class="footer-list-txt">
              <h5>品质保障</h5>
              <h6>品质护航 购物无忧</h6>
            </div>
          </li>
          <li>
            <div class="footer-list-logo icons-kuai"></div>
            <div class="footer-list-txt">
              <h5>超快物流</h5>
              <h6>物流超快 使命必达</h6>
            </div>
          </li>
           <li>
            <div class="footer-list-logo icons-bao"></div>
            <div class="footer-list-txt">
              <h5>品质保障</h5>
              <h6>品质护航 购物无忧</h6>
            </div>
          </li>
           <li>
            <div class="footer-list-logo  icons-bao"></div>
            <div class="footer-list-txt">
              <h5>品质保障</h5>
              <h6>品质护航 购物无忧</h6>
            </div>
          </li>
        </ul>
      </div>
      <div class="footer-info">
          <ul>
              <li><h6 class="titles">购物指南</h6></li>
              <li><a href="#">免费注册</a></li>
              <li><a href="#">免费注册</a></li>
              <li><a href="#">免费注册</a></li>
          </ul>
          <ul>
             <li><h6 class="titles">天猫保障</h6></li>
              <li><a href="#">发票保障</a></li>
              <li><a href="#">售后规则</a></li>
              <li><a href="#">物流保障</a></li>
          </ul>
          <ul>
              <li><h6 class="titles">支付方式</h6></li>
              <li><a href="#">快捷支付</a></li>
              <li><a href="#">微信支付</a></li>
              <li><a href="#">支付宝支付</a></li>
          </ul>
          <ul>
               <li><h6 class="titles">商家服务</h6></li>
              <li><a href="#">天猫规则</a></li>
              <li><a href="#">微信支付</a></li>
              <li><a href="#">支付宝支付</a></li>
              <li><a href="#">天猫规则</a></li>
              <li><a href="#">微信支付</a></li>
              
          </ul>
           <ul>
              <li><h6 class="titles">手机天猫</h6></li>
              <li><img src="~assets/image/two.png"></li>
          </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.container-fluid {
  margin-top: 100px;
  background-color: #ffffff;
}
.footer {
  background-color: #ffffff;
  width: 1190px;
  margin: 0 auto;
  padding: 50px;
}
.footer-list-item {
  display: flex;
}
.footer-list-item > li {
  display: flex;
  flex: 1;
}
.footer-list-logo {
  width: 50px;
  height: 50px;
  background: url("~assets/image/icons.png");
 
  margin-right: 20px;
}
.icons-zheng{
 background-position: -253px -3px;
}
.icons-kuai{
    background-position: -255px -54px;
}
.icons-bao{
     background-position: -257px -105px;
}
.footer-list-txt{
    text-align: left;
}
.footer-list-txt >h5{
    font-size: 17px;
    font-weight: bold;
}
.footer-list-txt >h6{
    color: #999292;
}
.footer-info{
    display: flex;
    margin-top: 50px;
    border-top: 1px solid #a9a2a2;
}
.footer-info>ul{
    text-align: left;
    margin-top: 20px;
    flex:1;
}
.footer-info>ul>li>a{
    line-height: 3  0px;
    text-decoration: none;
    font-size: 14px;
    color: #a9a2a2;
}
.titles{
    font-weight: bold;
}
</style>